<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader :showBankVail="false">首页</IHeader>
      <view class="nav-container">
        <view class="nav-card" v-for="(nav, navIndex) in navList" :key="navIndex" @click="handleNavClick(nav)">
          <view class="nav-icon-wrapper">
            <text class="nav-icon">{{ nav.icon }}</text>
          </view>
          <text class="nav-text">{{ nav.text }}</text>
        </view>
      </view>
    </template>
    <view class="wh_auto">
      <view class="stats-overview">
        <view class="stat-item " v-if="userInfoStore.getUserInfo.type == '02'" @click="navigatePage.navigateTo('/pages/zmanager/agent/index')">
          <text class="stat-label">二级代理商</text>
          <text class="stat-value">{{ titleCuntData.wdErDlsCount }}</text>
        </view>
        <view class="stat-item" v-else>
          <text class="stat-label">总网点数</text>
          <text class="stat-value">{{ titleCuntData.wdCount }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">总设备数</text>
          <text class="stat-value">{{ titleCuntData.deviceCount }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">本月订单</text>
          <text class="stat-value">{{ titleCuntData.orderCount }}</text>
        </view>
      </view>

      <view class="page-container">
        <view class="data-card" v-for="(item, index) in dataList" :key="index">
          <view class="card-header">
            <text class="card-title">{{ item.label }}</text>
          </view>

          <view class="data-grid">
            <view class="data-cell" v-for="(sitem, sindex) in item.dataList" :key="sindex">
              <text class="cell-label">{{ sitem.label }}</text>
              <text class="cell-value">{{ sitem.value }}{{ sitem.unit || '' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <template #footer><ITabBarManager :index="0" /></template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="index">
  import { onMounted, ref } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import ITabBarManager from '@/components/container/ITabBarManager.vue'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import useUserInfoStore from '@/store/userInfo'
  import { getDevInfoM } from '@/api/zmanager'
  import { onShow } from '@dcloudio/uni-app'
  import useToastMsg from '@/hooks/sysMsg'
  import { getUserDetails } from '@/api/zmanager/login'
  const navigatePage = useNavigatePage()
  const toastMsg = useToastMsg()
  const userInfoStore = useUserInfoStore()
  userInfoStore.setPlatformType('gld')
  const titleCuntData = ref({
    wdCount: 0,
    deviceCount: 0,
    orderCount: 0,
    wdErDlsCount: 0,
  })
  // 功能导航配置
  const navList = ref([
    { icon: '🏬', text: '网点管理', url: '/pages/zmanager/outlets/index' },
    { icon: '📱', text: '设备管理', url: '/pages/zmanager/device/index' },
    // { icon: '📝', text: '订单管理', url: '/pages/zmanager/order/index' },
  ])

  // 数据列表
  const dataList = ref([
    {
      label: '网点数据',
      dataList: [
        { label: '网点总数', value: '0', unit: '个' },
        { label: '设备总数', value: '0', unit: '台' },
        { label: '在线设备', value: '0', unit: '台' },
        { label: '离线设备', value: '0', unit: '台' },
      ],
    },
    {
      label: '今日数据',
      dataList: [
        { label: '订单数量', value: '0', unit: '单' },
        { label: '订单用户', value: '0', unit: '人' },
      ],
    },
    {
      label: '本月数据',
      dataList: [
        { label: '订单数量', value: '0', unit: '单' },
        { label: '订单用户', value: '0', unit: '人' },
      ],
    },
  ])

  // 导航点击事件
  const handleNavClick = (nav: any) => {
    uni.navigateTo({ url: nav.url })
  }
  onShow(() => {
    userInfoStore.setPlatformType('tzr')
    console.log('页面栈长度:111111111111111111111')
    console.log('页面栈长度:', getCurrentPages().length)
    console.log(
      '页面栈:',
      getCurrentPages().map((p) => p.route),
    )
    if (uni.getStorageSync('shtzrToken')) {
      getUserInfo()
    } else {
      navigatePage.redirectTo('/pages/invest/login/index')
    }
  })
  const getUserInfo = async () => {
    const result: any = await getUserDetails('tzr')
    if (result) {
      userInfoStore.setUserInfo(result.data)
      init()
    }
  }
  const init = async () => {
    toastMsg.showLoading()
    const result = await getDevInfoM(userInfoStore.getUserInfo.userId)
    if (result) {
      titleCuntData.value.wdCount = result.data.npSize
      titleCuntData.value.deviceCount = result.data.dcSize
      titleCuntData.value.orderCount = result.data.usSize
      titleCuntData.value.wdErDlsCount = result.data.usErDlsSize || 0
      //网点
      dataList.value[0].dataList = [
        { label: '网点总数', value: result.data.npSize, unit: '个' },
        { label: '设备总数', value: result.data.dcSize, unit: '台' },
        { label: '在线设备', value: result.data.dcOnlineSize, unit: '台' },
        { label: '离线设备', value: result.data.dcNotOnlineSize, unit: '台' },
      ]
      //今日
      dataList.value[1].dataList = [
        { label: '订单数量', value: result.data.usJrSize, unit: '单' },
        { label: '订单用户', value: result.data.jrMap, unit: '人' },
      ]
      //本月
      dataList.value[2].dataList = [
        { label: '订单数量', value: result.data.usSize, unit: '单' },
        { label: '订单用户', value: result.data.yueMap, unit: '人' },
      ]
        dataList.value[1].dataList.push({ label: '订单金额', value: result.data.usJr, unit: '元' })
        dataList.value[2].dataList.push({ label: '订单金额', value: result.data.yueJe, unit: '元' })
        dataList.value[1].dataList.push({ label: '退款金额', value: result.data.usJrtk, unit: '元' })
        dataList.value[2].dataList.push({ label: '退款金额', value: result.data.yueJeTk, unit: '元' })
    }
    toastMsg.hideLoading()
  }
</script>

<style scoped>
  /* 页面容器基础样式 - 适配小程序rpx单位 */
  .page-container {
    background-color: #f5f7fa;
    padding: 10rpx; /* 16px → 32rpx */
    box-sizing: border-box;
  }

  /* 功能导航 - 卡片式设计 */
  .nav-container {
    display: flex;
    gap: 32rpx; /* 16px → 32rpx */
    padding: 32rpx; /* 16px → 32rpx */
    box-sizing: border-box;
    width: 100%;
  }

  .nav-card {
    flex: 1;
    background-color: #ffffff;
    border-radius: 24rpx; /* 12px → 24rpx */
    padding: 20rpx; /* 10px → 20rpx */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); /* 2px → 4rpx，8px→16rpx */
    transform: translateZ(0);
    transition: transform 0.3s ease;
  }

  .nav-card-hover {
    transform: translateY(4rpx) translateZ(0); /* 2px → 4rpx */
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 1px→2rpx，4px→8rpx */
  }

  .nav-icon-wrapper {
    width: 100rpx; /* 50px → 100rpx */
    height: 100rpx; /* 50px → 100rpx */
    border-radius: 50%;
    background-color: #f0f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx; /* 10px → 20rpx */
  }

  .nav-icon {
    font-size: 48rpx; /* 24px → 48rpx */
    color: #3370ff;
  }

  .nav-text {
    font-size: 28rpx; /* 14px → 28rpx */
    color: #333333;
    font-weight: 500;
  }

  /* 数据概览区 */
  .stats-overview {
    display: flex;
    gap: 32rpx; /* 16px → 32rpx */
    padding: 0 32rpx 32rpx; /* 16px → 32rpx */
    box-sizing: border-box;
    width: 100%;
  }

  .stat-item {
    flex: 1;
    background-color: #ffffff;
    border-radius: 24rpx; /* 12px → 24rpx */
    padding: 32rpx; /* 16px → 32rpx */
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); /* 2px→4rpx，8px→16rpx */
    text-align: center;
  }

  .stat-label {
    font-size: 28rpx; /* 14px → 28rpx */
    color: #666666;
    display: block;
    margin-bottom: 16rpx; /* 8px → 16rpx */
  }

  .stat-value {
    font-size: 44rpx; /* 22px → 44rpx */
    font-weight: bold;
    color: #3370ff;
  }

  /* 数据卡片 */
  .data-card {
    background-color: #ffffff;
    border-radius: 24rpx; /* 12px → 24rpx */
    padding: 32rpx; /* 16px → 32rpx */
    margin-bottom: 32rpx; /* 16px → 32rpx */
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); /* 2px→4rpx，8px→16rpx */
    transition: transform 0.2s ease;
  }

  .data-card-hover {
    transform: translateY(-4rpx); /* 2px → 4rpx */
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx; /* 16px → 32rpx */
  }

  .card-title {
    font-size: 32rpx; /* 16px → 32rpx */
    font-weight: bold;
    color: #333333;
  }

  /* 数据网格布局 - 适配小程序 */
  .data-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32rpx; /* 16px → 32rpx */
  }

  .data-cell {
    width: calc(32% - 16rpx); /* 减去一半gap（32rpx/2=16rpx） */
    background-color: #f9fafb;
    border-radius: 16rpx; /* 8px → 16rpx */
    padding: 28rpx; /* 14px → 28rpx */
    box-sizing: border-box;
    transition: background-color 0.2s ease;
  }

  .data-cell-hover {
    background-color: #f0f2f5;
  }

  .cell-label {
    font-size: 28rpx; /* 14px → 28rpx */
    color: #666666;
    display: block;
    margin-bottom: 12rpx; /* 6px → 12rpx */
  }

  .cell-value {
    font-size: 36rpx; /* 18px → 36rpx */
    font-weight: 600;
    color: #333333;
  }
</style>
